{% extends 'mobile/base_mobile.html' %}
{% load staticfiles %}
{% load my_filters %}
{% block title %}
    砍价页-{{ kanjia.title }}-{{ kanjia.shop.title }}-{{ user.id }}
{% endblock %}
{% block content %}
    <style>
        body {
            text-align: center;
            color: white;
        }

        .top_area {
            background-color: {{ artical_color|default:'#e20e35'}};
            border-radius: 0 0 32px 32px;
            padding: 1.5rem;

        }

        .top_img {
            width: 100%;
            border-radius: 32px 32px;
        }

        .super_time_style {
            border-radius: 5px;
            padding: 3px;
        }

        .in_one {
            word-break: keep-all;
            white-space: nowrap;
        }

        .font_background_black {
            background-color: #3c3f41;
        }

        .act_main {
            position: relative;
            top: -120px;
            width: 90%;
            background-color: #faf9f9;
            margin: 0 auto 0 auto;
            box-shadow: 2px 25px 15px rgba(104, 103, 103, 0.39);
            padding-bottom: 32px;
        }

        .desc img {
            width: 100%;
        }

        .act_main .joiner_logo {
            position: relative;
            top: 32px;
            width: 84px;
            height: 84px;
            border-radius: 50%;
        }

        .title {
            padding: 84px 0 120px 0;
            font-size: 1.1rem;
            font-weight: 500;
        }

        .joiner {
            position: relative;
            top: -64px;
            padding-bottom: 32px;
        }

        .price_text {
            font-weight: 500;
            position: relative;
            top: 64px;
            color: {{ artical_color|default:'#e20e35'}};
            padding: 32px;
        }

        .join_btn {
            position: relative;
            top: -64px;
            width: 60%;
            background-color: {{ artical_color|default:'#e20e35'}};
            border-radius: 40px;
            padding: 16px;
            font-weight: 500;
            margin: 0 auto 48px auto;
            box-shadow: 2px 15px 15px rgba(104, 103, 103, 0.39);
        }

        .solution_intro {
            position: relative;
            top: -64px;
            border-radius: 16px;
        }

        .inventory_desc {
            display: block;
            margin: 84px;
            font-weight: 500;
            color: black;
        }

        .text_important {
            position: relative;
            top: -15px;
            color: {{ artical_color|default:'#e20e35'}};
            font-size: 1.5em;
        }

        .title_detail {
            width: 50%;
            margin: 64px auto 16px auto;
        }

        p {
            padding: 10px 32px 10px 32px;
        }

        .desc {
            color: black;
            width: 95%;
            margin: 0 auto 0 auto;
        }

        .solution_img {
            width: 71%;
        }

        .solution_detail {
            width: 95%;
        }

        .time_black {
            color: black;
        }

        .cover_all {
            position: fixed;
            justify-content: center;
            align-items: center;
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            height: 100%;
            z-index: 10;
            background: rgba(0, 0, 0, 0.7)
        }

        .join_info_model {
            background-color: #fff;
            width: 80%;
            border-radius: 30px;
            color: #666;
        }

        .join_info_model * {
            padding: 20px;
            margin: 15px;
            border-radius: 10px;
        }

        .info_notification {
            color: {{ artical_color|default:'#e20e35'}};
        }

        .join_info_model input {
            border: 1px solid #555;
            font-size: 32px;
            color: #888;
        }

        .model_title {
            font-size: 40px;
            font-weight: 700;
        }

        div .info_input {
            text-align: center;
            width: 80%;
            line-height: 40px;
            border-radius: 20px;
            background-color: #ccc;
        }

        .info_submit {
            width: 60%;
            font-size: 36px;
            background-color: {{ artical_color|default:'#e20e35'}};
            border-radius: 50px;
            color: white;
            font-weight: 500;
            margin: 30px auto;
        }

        .close_btn {
            position: relative;
        {#top: -8rem;#} display: block;
            width: 100px;
            height: 100px;
            margin: 0 auto;
        }

        .close_btn_div {
            width: 100%;
        }

        .master_logo {
            display: inline-block;
            color: black;
            font-size: 1rem;
            padding: 20px;
        }

        .master_logo span {
            position: relative;
            top: 32px;
        }

    </style>
    <div class="cover_all">
        <!-- 参团填写信息 -->
        <div class="join_info_model">
            <form class="join_info_form">
                {% csrf_token %}
                <div class="model_title">填写信息</div>
                <div class="info_notification">所留信息不公开，仅用于活动兑换后商家联系</div>
                <div><input name="name" class="info_input" placeholder="输入您的姓名"/></div>
                <div><input name="phone" class="info_input" placeholder="输入您的电话号码"/></div>
                <div class="info_submit">
                    <span class="" onclick="join_now()">完&nbsp;&nbsp;&nbsp;&nbsp;成</span>
                </div>
            </form>
        </div>
        <div class="close_btn_div">
            <img src="{% static 'images/close.png' %}" class="close_btn" onclick="$('.cover_all').slideUp(50)">
        </div>
    </div>
    {% if kanjia.music %}
        <div class="music_logo">
            <img src="{% static 'images/music.png' %}">
        </div>

        <!--音乐按钮-->
        <div class="music-bt rotate" id="audio_btn">
            <audio loop hidden id="media" type="audio/mpeg" controls="controls">
                <source src="{{ kanjia.get_music_url }}">
                您的浏览器不支持 audio 标签。
            </audio>
        </div>
    {% endif %}
    {# 悬浮按钮 #}
    {% include 'mobile/float_menu.html' %}
    <div class="top_area">
        <img class="top_img" src="{{ kanjia.get_image_url }}">
        <p class="title">{{ kanjia.title }}</p>
    </div>
    <div class="act_main">
        <div class="main_joiner in_one">
            <span class="price_text">原价：<span class="text_important">{{ kanjia.price_original|div100 }}</span>元</span>
            <div class="master_logo">
                <img class="joiner_logo" src="{{ kan_master.user.logo }}"><br>
                <span>{{ kan_master.real_price|div100 }}元</span>
            </div>
            <span class="price_text">底价：<span class="text_important">{{ kanjia.price_discount|div100 }}</span>元</span>
        </div>
        <p class="inventory_desc in_one">已有<span
                class="text_important">39</span>人支付成功，剩<span class="text_important">11</span>个名额
        </p>
        <div class="joiner">
            {% for item in helper_list %}
                <div class="master_logo">
                    <img class="joiner_logo" src="{{ item.user.logo }}"><br>
                    <span>{{ item.get_sub_price }}</span>
                </div>
            {% endfor %}
        </div>
        <div class="down_count in_one">
            <p class="super_huodong_status ">
                {% if kanjia.has_start and not kanjia.has_end %}
                    <span class="super_time_style font_background_black">距 结束 :</span>
                    <span class="days super_time_style time_black"></span>
                    <span class="super_time_style font_background_black days_ref">天</span>
                    <span class="hours super_time_style time_black"></span>
                    <span class="super_time_style font_background_black hours_ref">时</span>
                    <span class="minutes super_time_style time_black"></span>
                    <span class="super_time_style font_background_black minutes_ref">分</span>
                    <span class="seconds super_time_style time_black"></span>
                    <span class="super_time_style font_background_black seconds_ref">秒</span>
                {% elif not kanjia.has_start %}
                    <span class="super_time_style font_background_black">距 开始 :</span>
                    <span class="days super_time_style time_black"></span>
                    <span class="super_time_style font_background_black days_ref">天</span>
                    <span class="hours super_time_style time_black"></span>
                    <span class="super_time_style font_background_black hours_ref">时</span>
                    <span class="minutes super_time_style time_black"></span>
                    <span class="super_time_style font_background_black minutes_ref">分</span>
                    <span class="seconds super_time_style time_black"></span>
                    <span class="super_time_style font_background_black seconds_ref">秒</span>
                {% else %}
                    <span class="font_background_black">活动已结束</span>
                {% endif %}
            </p>
        </div>
    </div>
    {% if kanjia.has_start and not kanjia.has_end %}
        {% if not should_pay %}
            {% if is_self %}
                <div class="join_btn" onclick="help_now()">帮自己砍价</div>
                <div class="join_btn" onclick="">邀请好友帮砍</div>
            {% else %}
                <div class="join_btn" onclick="help_now()">帮她(他)砍价</div>

                <div class="join_btn"
                     onclick="location.href='{% url "wehelp:join" kanjia.id %}?shop={{ shop.id }}'">
                    {% if not has_join %}
                        去报名
                    {% else %}
                        查看我的砍价
                    {% endif %}
                </div>
            {% endif %}
        {% elif should_pay %}
            {% if is_self %}
                {% if has_pay %}
                    <div class="join_btn"
                         onclick="window.location.href='{% url "account:personal_home" %}'">
                        已支付,查看订单
                    </div>
                {% else %}
                    <div class="join_btn"
                         onclick="pay_now(this, '{{ kanjia.id }}', {{ kanjia.price_discount }}, '', '{{ kanjia.shop_id }}')">
                        已砍至底价，立即支付
                    </div>
                {% endif %}
            {% else %}
                <div class="join_btn" onclick="">已砍至底价</div>
                <div class="join_btn"
                     onclick="location.href='{% url "wehelp:join" kanjia.id %}?shop={{ shop.id }}&state={{ state }}'">
                    {% if not has_join %}
                        去报名
                    {% else %}
                        查看我的砍价
                    {% endif %}
                </div>
            {% endif %}
        {% endif %}
    {% elif not kanjia.has_start %}
        <div class="join_btn">未开始</div>
    {% elif kanjia.has_end %}
        <div class="join_btn">已结束</div>
    {% endif %}
    <div class="solution_intro ">
        <p>
            <img class="solution_img" src="{% static 'images/solution.png' %}">
        </p>
        <p class="">
            <img class="solution_detail" src="{{ kanjia.get_image_url }}">
        </p>
    </div>
    <div class="desc " id="desc">
        <div class="title_detail">
            <img src="{% static 'images/act_detail.png' %}">
        </div>
        <div class="content">{{ kanjia.desc }}</div>
    </div>

    <script>
        function timer(element, card_time) {

            console.log(card_time)
            element.downCount({
                //时间格式转换
                date: card_time,
                offset: +8 //抵消，减去时间差
            }, function () {
                location.reload()
            });
        }

        $(".music_logo").click(function () {
            playPause()
            if ($(this).hasClass('super_round') == false) {
                $(this).addClass('super_round')
            } else {
                $(this).removeClass("super_round")
            }
        })
        $(function () {
            $('.cover_all').hide();
            if ('{{ kanjia.has_start }}' == 'True' && '{{ kanjia.has_end }}' == 'False') {
                timer($(".down_count"), '{{ kanjia.end_time|date:"m/d/Y H:i:s" }}');
            } else if ('{{ kanjia.has_start }}' == 'False') {
                timer($(".down_count"), '{{ kanjia.start_time|date:"m/d/Y H:i:s" }}');
            } else {
                console.log('已结束！')
            }
            {% if kanjia.music %}
                $(".music_logo").click()
            {% endif %}
        });

        function help_now() {
            $.ajax({
                async: false,//这一步是非常重要的，作用是设置为同步执行
                type: "POST",
                data: {
                    csrfmiddlewaretoken: $.cookie("csrftoken")
                },
                dataType: "json",
                success: function (res) {
                    console.log(res);
                    if (res.status == 0) {
                        alert('恭喜！成功砍掉了' + res.detail.real_sub_price + '元!')
                        location.reload()
                    } else if (res.status == 1) {
                        alert(res.detail)
                        location.reload()
                    } else {
                        for (var key in res.detail) {
                            var item = res.detail[key];
                            alert(item[0]); //AA,BB,CC,DD
                            break;
                        }
                    }

                },
                error: function (res) {
                    console.log(res);
                    alert(res)
                }
            });
        }

        /* 音乐播放暂停 */
        function playPause() {
            var music = document.getElementById('media');
            if (music.paused) {
                music.play();
            } else {
                music.pause();
            }

        }
    </script>
    {% if sign %}
        <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
        <script type="text/javascript">
            wx.config({
                debug: false,
                appId: '{{ sign.appId}}',
                timestamp: {{ sign.timestamp }},
                nonceStr: '{{ sign.nonceStr }}',
                signature: '{{ sign.signature }}',
                jsApiList: [
                    'onMenuShareAppMessage',
                    'hideMenuItems',
                    'chooseWXPay'
                ]
            });

            wx.ready(function () {
                // 1 判断当前版本是否支持指定 JS 接口，支持批量判断
                wx.checkJsApi({
                    jsApiList: [
                        'onMenuShareAppMessage',
                        'hideMenuItems'
                    ],
                    success: function (res) {
                    }
                });

                wx.hideMenuItems({
                    menuList: ['menuItem:share:timeline']
                });

                // 2. 分享接口
                // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
                wx.onMenuShareAppMessage({
                    title: '{{ kanjia.title|linebreaksbr|striptags }}',
                    link: '{{ sign.share_url|safe }}',
                    desc: '这波操作稳了！我参加了“{{ kanjia.title|linebreaksbr|striptags }}”的活动，快来帮我减价',
                    imgUrl: '{{ kanjia.get_image_url }}',
                    trigger: function (res) {
                    },
                    success: function (res) {
                    },
                    cancel: function (res) {
                    },
                    fail: function (res) {
                    }
                });
            });

            function pay_now(obj, id, amount, comment, shop) {
                /*
                * obj:element
                * id:活动id
                * amount:金额，后台还会进行计算
                * comment：订单备注
                * shop:店铺ID
                */
                $.ajax({
                    url: '/order/api/kanjia/create',
                    method: 'post',
                    data: {
                        id: id,
                        number: 1,
                        amount: amount,
                        comment: comment,
                        csrfmiddlewaretoken: $.cookie("csrftoken")
                    },
                    beforeSend: function () {
                        console.log(id, amount);
                        $(obj).attr('disabled', 'disabled');
                    },
                    success: function (data) {
                        console.log(data);
                        if (data.status == 0) {
                            if (data.detail.pay == 'self') {
                                pay_for_wx(obj, data.detail.order, amount, shop);
                            } else {
                                window.location.href = data.detail.pay_url;
                            }
                        } else {
                            alert(data.detail);
                        }
                    },
                    complete: function () {
                        $(obj).removeAttr('disabled');
                    },
                    error: function (data) {
                        $(obj).removeAttr('disabled');
                        console.log(data);
                    }
                });
            }

            function pay_for_wx(obj, order, amount, shop) {

                // 请求微信JS支付参数
                $.ajax({
                    url: "/order/pay/kanjia",
                    method: "post",
                    data: {
                        order: order,
                        amount: amount,
                        channel: 'JSAPI',
                        openid: $.cookie(shop) || '',
                        csrfmiddlewaretoken: $.cookie("csrftoken")
                    },
                    beforeSend: function (req) {
                        $(obj).attr('disabled', 'disabled');
                        req.setRequestHeader("X-CSRFToken", $.cookie("csrftoken"));
                    },
                    success: function (data) {
                        console.log(data);
                        if (data['status'] != 0) {
                            $(obj).removeAttr('disabled');
                            alert(data['detail']);
                        } else {
                            var params = JSON.parse(data['detail']['params']);
                            // 进行微信支付
                            wx.chooseWXPay({
                                timestamp: parseInt(params['timeStamp']),
                                nonceStr: params['nonceStr'], // 支付签名随机串，不长于 32 位
                                package: params['package'], // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                                signType: params['signType'], // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                                paySign: params['paySign'], // 支付签名
                                success: function (res) {
                                    alert('支付完成',);
                                    $(obj).removeAttr('disabled');
                                    location.reload();
                                },
                                cancel: function (res) {
                                    alert('取消支付');
                                },
                                fail: function (res) {
                                    alert(res.errMsg);
                                }
                            });
                        }
                    },
                    complete: function (data) {
                        console.log(data);
                        $(obj).removeAttr('disabled');
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $(obj).removeAttr('disabled');
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus);
                    }
                });
            }
        </script>
    {% endif %}
{% endblock %}